@media screen and (max-width: 1500px) {
  #menu-container {
    width: 50px;
  }
  #content-container {
    left: 50px;
  }
  .menu-item {
    text-align: center;
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
  }
  .menu-item i {
    display: inline-block;
  }
  .menu-item span {
    display: none;
  }
  .menu-item.active {
    background-color: #2D9B5C;
    background-image: linear-gradient(left, #33af68, #2a8f55);
    background-image: -webkit-linear-gradient(left, #33af68, #2a8f55);
  }
  .menu-item.active::before {
    content: "";
    position: absolute;
    background-color: #2D9B5C;
    background-image: linear-gradient(left, #2a8f55, #26834e);
    background-image: -webkit-linear-gradient(left, #2a8f55, #26834e);
    width: 6px;
    left: 100%;
    top: 0;
    bottom: 0;
    z-index: 10;
  }
  .menu-item.active::after {
    z-index: 10;
    content: "";
    position: absolute;
    left: 100%;
    top: 100%;
    width: 0;
    height: 0;
    border-top: 8px solid #1c6039;
    border-right: 6px solid transparent;
  }
  #projectPanel {
    width: 360px;
  }
  #projectPanel .line-panel {
    margin-left: 2rem;
  }
  #projectDetail {
    left: 360px;
  }
}
